<template>
	<view class="pad20">
		<view class="header-view pad30">
			<view class="top-text">
				<text>总收入</text> <text>已提现5500.00/10000.00</text>
			</view>
			<view class="num-view">
				10000.00
			</view>
			<view class="tx-view flex-ce">
				<text class="flex-cc" @tap="navTo('../../withdrawal/withdrawal')">提现</text>
			</view>
		</view>
		
		<view class="data-view mar-t20" v-for="(item,index) in billList" :key="index">
			<uni-list>
				<uni-list-item :title="item.ye+'年'" :show-arrow="false"></uni-list-item>
				<uni-list-item v-for="(items,indexs) in item.m" :key="indexs" 
				:show-badge="true" :title="items.m+'月账单'" :badge-text="'¥'+items.num" 
				@tap="navTo('../billDetails/billDetails')"/>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	export default {
		components: {
			uniList,
			uniListItem
		},
		data() {
			return {
				billList:[
					{id:1,ye:2019,m:[
						{id:1,m:8,num:265},
						{id:2,m:7,num:265},
						{id:3,m:6,num:265},
					]},
					{id:2,ye:2018,m:[
						{id:1,m:8,num:265},
						{id:2,m:10,num:365},
					]},
					{id:3,ye:2017,m:[{id:1,m:8,num:265}]},
					{id:4,ye:2016,m:[{id:1,m:8,num:265}]},
					{id:5,ye:2015,m:[{id:1,m:8,num:265}]}
				]
			}
		},
		methods: {
			navTo:function(url){
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style>
	.header-view{
		background:linear-gradient(186deg,rgba(38,117,245,1) 0%,rgba(77,75,176,1) 100%);
		border-radius:8upx;
	}
	.top-text{
		
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.top-text text:first-child{
		font-size:36upx;
		line-height:50upx;
		margin-right: 20upx;
	}
	.top-text text:last-child{
		font-size:24upx;
		line-height:34upx;
	}
	.num-view{
		font-size:64upx;
		font-weight:600;
		color:rgba(255,255,255,1);
		line-height:90upx;
	}
	.tx-view text{
		width:120upx;
		height:48upx;
		border-radius:29upx;
		border:2upx solid rgba(255,255,255,1);
		font-size:28upx;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	
	
	.data-view{
		background-color: #FFFFFF;
		border-radius:20upx;
	}
	
	.uni-list-item__content-title{
	    -o-text-overflow: ellipsis;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    line-height: 1.5;
	    overflow: hidden;
		font-size:28upx;
		font-weight:600 !important;
		color:rgba(60,60,60,1);
	}
	
	
	/* 角标 */
	.uni-badge-success {
	    color: #fff;
	    background-color: #007AFF !important;
	}
</style>
